import CommonModal from "@/pages/OrderModule/common/components/CommonModal/modal";
import CommonTable from "@/pages/OrderModule/common/components/CommonTable/components/CommonTable";
import { Button, Popover, message } from "antd";
import { useState, useEffect } from "react";
import { getPackageDataOp } from "../../service";
import CommonLoading from "@/components/CommonLoading";
import CommonZjfImg from "@/components/CommonImg/ZifComponent";

const SelectPackaging = ({ visible, handleCancel, handleOk }) => {
	const [packList, setPackList] = useState([]); //包装数据
	const [selectedRowKeys, setSelectedRowKeys] = useState([]);
	const [selectedRows, setSelectedRows] = useState([]);
	const [loading, setLoading] = useState(false);

	useEffect(() => {
		if (visible) {
			getPackageData();
			setSelectedRowKeys([]);
		}
	}, [visible]);

	//修改订单基础配置数据
	const getPackageData = async val => {
		setLoading(true);
		setPackList([]);
		const { success, data = {} } = await getPackageDataOp({
			type: window.APP_TITLE == '找家纺' ? 2 : 6
		});
		if (success) {
			const { records = [] } = data;
			const arr = [];
			records.forEach(item => {
				arr.push({ ...item, goodsNum: 1 });
			});
			setPackList(arr);
		}
		setLoading(false);
	};

	//点击提交
	const handleSubmit = () => {
		if (selectedRowKeys.length) {
			if (selectedRowKeys.length == 1) {
				handleOk(selectedRows);
			} else {
				message.info("只能选择1个包装");
			}
		} else {
			message.info("请选择包装");
		}
	};

	const baseTableColumns = [
		{
			title: "序号",
			dataIndex: "index",
			key: "index",
			width: 60,
			render: (t, r, i) => i + 1
		},
		{
			title: "图片",
			dataIndex: "index",
			key: "index",
			width: 100,
			render: (t, record, i) => (
				<span>
					<CommonZjfImg storeId={record.storeId} img={record.goodsImage} />
				</span>
			)
		},
		{
			title: "包装名称",
			dataIndex: "goodsName",
			key: "goodsName",
			width: 200
		},
		{
			title: "商品编码",
			dataIndex: "goodsId",
			key: "goodsId",
			width: 100
		},
		{
			title: "款式编码",
			dataIndex: "goodsCommonid",
			key: "goodsCommonid",
			width: 100
		},
		{
			title: "价格",
			dataIndex: "goodsPrice",
			width: 80,
			render(value, record) {
				return <span style={{ color: "#f00" }}>¥{value}</span>;
			}
		},
		{
			title: "数量(个)",
			width: 120,
			dataIndex: "goodsNum",
			key: "goodsNum"
		}
	];

	const rowSelection = {
		type: "checkbox",
		fixed: true,
		selectedRowKeys,
		onChange: (selectedRowKeys, selectedRows) => {
			setSelectedRowKeys(selectedRowKeys);
			setSelectedRows(selectedRows);
		}
	};

	return (
		<>
			<CommonModal open={visible} onCancel={handleCancel} onOk={handleSubmit} title={{ title: "添加包装" }} width={870}>
				<CommonTable
					columns={baseTableColumns}
					dataSource={packList}
					pagination={false}
					scroll={{ y: 300 }}
					rowKey={"goodsId"}
					rowSelection={rowSelection}
				/>
				<CommonLoading loading={loading} />
			</CommonModal>
		</>
	);
};
export default SelectPackaging;
